<template>
    <z-paging>

        
        <template v-if="Videoflag">
			<Drawvideo @videoEnd="handleVideoEnd" @InitialVideoTime="setInitialVideoTime" @passVideo="passVideo"></Drawvideo>
		</template>
        <template>
            <blidboxdrawResult :prizeList="prizeData" :drawResultShow="drawResultShow" @gotoin="gotoin"
                @accept="accept"></blidboxdrawResult>
        </template>
    </z-paging>
</template>
<script>

import blidboxdrawResult from '../components/blidboxdrawResult.vue'
import Drawvideo from '../components/video.vue'
export default {
    components: {
        blidboxdrawResult,
        Drawvideo
    },
    data() {
        return {
            box_order_id: '',
            prizeData: [],  // 抽奖结果
            drawResultShow: false,
            Videoflag:false,

        }
    }, 
    onLoad(option) {
        this.box_order_id = option.box_order_id
    },
    onShow() {
this.jiangpinre()
    },
    methods: {
        // 在这里执行父组件需要执行的操作
		handleVideoEnd() {
			console.log('视频播放已完毕');
			this.Videoflag = false

		},
		setInitialVideoTime() {
			console.log("视频加载完成时事件");
			this.Videoflag = true


		},
		passVideo(){
			this.handleVideoEnd()
		},
// 合并的奖品结果
jiangpinre(){
    this.$Request.get(this.$api.index.blindBoxOrderPrizesD_show + `/${this.box_order_id}`).then(res => {
                if (res.code == 200) {
                    
                    res.data.data.forEach(item => {
                        if(item.level_id > 2){
                            this.setInitialVideoTime()
                        }
                    });
                    this.prizeData = res.data.data // 抽奖结果
                    this.drawResultShow = true
                }
            })
},

        gotoin() {
            uni.switchTab({
                url: '/pages/bonus/index',
            })
        },
        accept() {
            this.$goBack()
            this.drawResultShow = false

        },
    }
}
</script>

<style lang="scss" scoped>
.draw_box {
    position: relative;
    height: 100vh;
    display: flex;
    justify-content: center;
    flex-direction: column;
    width: 100%;

    .draw_btn_box {
        position: absolute;
        bottom: 130rpx;
        left: 0;
        right: 0;
        margin: auto;
        width: 529rpx;
        height: 120rpx;
        z-index: 2;
        animation: name .8s ease infinite;

        image {
            width: 100%;
            height: 100%;
        }

        @keyframes name {
            0% {
                transform: scale(0.8);
            }

            50% {
                transform: scale(1);
            }

            100% {
                transform: scale(0.8)
            }
        }
    }
}
</style>